﻿@page "/components/switch"

<DocsPage>
    <DocsPageHeader Title="Switch" SubTitle="Similar to a checkbox but visually different, the switch lets the user switch between two values with the tap of a button." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Basic switches</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SwitchBasicExample />
            </SectionContent>
            <SectionSource Code="SwitchBasicExample" GitHubFolderName="Switch"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Switch with label</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SwitchWithLabelExample />
            </SectionContent>
            <SectionSource Code="SwitchWithLabelExample" GitHubFolderName="Switch"  />
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader>
                <Title>Binding switch against different data types</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SwitchConversionExample />
            </SectionContent>
            <SectionSource Code="SwitchConversionExample" GitHubFolderName="Switch"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>ReadOnly mode</Title>
                <Description>Set <CodeInline>ReadOnly="true"</CodeInline> will make the switch control stop listening to user inputs.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <SwitchReadOnlyExample/>
            </SectionContent>
            <SectionSource Code="SwitchReadOnlyExample" GitHubFolderName="Switch" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>

